<!-- components/GridItem.vue -->
<template>
	<view class="list-item" @click="handleClick">
		<slot name="title">
			<text class="title">{{ title }}</text>
		</slot>
		<text class="arrow">›</text>
		<slot></slot>
	</view>
</template>

<script setup>
	const props = defineProps({
		title: String,
		url: String
	})

	function handleClick() {
		if (props.url) {
			uni.navigateTo({
				url: props.url
			})
		}
	}
</script>
<style lang="scss">
	.list-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 40rpx;
		border-bottom: 1rpx solid #f0f0f0;
		color: #333;
		font-size: 30rpx;
	}

	.list-item:last-child {
		border-bottom: none;
	}

	.arrow {
		color: #aaa;
		font-size: 34rpx;
	}
</style>